{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "13ea313f-bc19-49e8-a697-f9469ac710a8",
   "metadata": {
    "tags": [
     "remove_cell"
    ]
   },
   "outputs": [],
   "source": [
    "import datapane as dp\n",
    "import warnings\n",
    "warnings.filterwarnings(\"ignore\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "715d98b8-5cbb-41ce-a74c-825349388227",
   "metadata": {},
   "source": [
    "::: datapane.Text\n",
    "    options:\n",
    "          members:\n",
    "              - __init__"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a8080790-a4d2-48ec-acdd-9d5962be43e3",
   "metadata": {},
   "source": [
    "### Simple Text from Markdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "08cd6fd9-bcce-42d8-af66-8575898c97c2",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Text(\"__My awesome markdown__\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "49a6849b-4fc9-4ced-aac3-a55a8e29f9c3",
   "metadata": {},
   "source": [
    "### Multi-line Text\n",
    "\n",
    "To include multi-line text and formatting the words, use triple-quoted string, e.g. `\"\"\"Some words\"\"\"`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c875f8d0-a85e-418b-9729-d4354f97d33f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "md = \"\"\"Quas *diva coeperat usum*; suisque, ab alii, prato. Et cornua frontes puerum,\n",
    "referam vocassent **umeris**. Dies nec suorum alis adstitit, *temeraria*,\n",
    "anhelis aliis lacunabant quoque adhuc spissatus illum refugam perterrita in\n",
    "sonus. Facturus ad montes victima fluctus undae Zancle et nulli; frigida me.\n",
    "Regno memini concedant argento Aiacis terga, foribusque audit Persephone\n",
    "serieque, obsidis cupidine qualibet Exadius.\n",
    "\n",
    "```python\n",
    "utf_torrent_flash = -1;\n",
    "urlUpnp -= leakWebE - dslam;\n",
    "skinCdLdap += sessionCyberspace;\n",
    "var ascii = address - software_compile;\n",
    "webFlaming(cable, pathIllegalHtml);```\n",
    "\n",
    "## Quo exul exsecrere cuique non alti caerulaque\n",
    "\n",
    "*Optatae o*! Quo et callida et caeleste amorem: nocet recentibus causamque.\n",
    "\n",
    "- Voce adduntque\n",
    "- Divesque quam exstinctum revulsus\n",
    "- Et utrique eunti\n",
    "- Vos tantum quercum fervet et nec\n",
    "- Eris pennis maneas quam\n",
    "\"\"\"\n",
    "\n",
    "dp.Text(md)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "a1c26321-7f03-4785-a972-e06abbdfe397",
   "metadata": {},
   "source": [
    "### Text-heavy apps\n",
    "\n",
    "If your app is text-heavy (such as an blogpost) and it contains multiple other blocks, creating a list of strings and blocks in Python can be cumbersome. To solve this, Datapane provides a `format` option, which allows you to write a single block of Markdown (either in your app, or in a separate file), and intersperse it with other blocks.\n",
    "\n",
    "To do this, use double braces to specify where you want your other blocks to appear throughout your text."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "736fc01b-c4cb-48a9-9bb9-9a0866c93785",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import seaborn as sns\n",
    "import altair as alt\n",
    "\n",
    "md = \"\"\"\n",
    "For example, if we want to visualize the number of people in each class within the interval we select a point chart between age and fare, we could do something like this.\n",
    "\n",
    "{{plot}}\n",
    "\n",
    "Altair allows you to create some extremely interactive plots which do on-the-fly calculations — without even requiring a running Python server!\n",
    "\"\"\"\n",
    "\n",
    "titanic = sns.load_dataset(\"titanic\")\n",
    "\n",
    "points = (\n",
    "    alt.Chart(titanic)\n",
    "    .mark_point()\n",
    "    .encode(\n",
    "        x=\"age:Q\",\n",
    "        color=\"class:N\",\n",
    "        y=\"fare:Q\",\n",
    "    )\n",
    "    .interactive()\n",
    "    .properties(width=\"container\")\n",
    ")\n",
    "\n",
    "dp.Text(md).format(plot=points)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2724b99b-c831-4819-8054-f2ac9151059b",
   "metadata": {},
   "source": [
    "### Text from File"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cb704cd5-7a46-48cb-b968-4a825cb75b13",
   "metadata": {},
   "source": [
    "Alternatively, you can write your article or post in your favourite markdown editor, and pass it in as a file.\n",
    "\n",
    "```python\n",
    "dp.Text(file=\"./my_blogpost.md\").format(plot=points)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "adb9aabb-2587-4712-8ae5-4ae4ca4225d8",
   "metadata": {},
   "source": [
    "::: datapane.Code"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ae7d4da1-b35e-4c39-829f-9219319e4ef6",
   "metadata": {},
   "source": [
    "### Simple Code Block"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "19a7ff57-d360-41d7-b28a-49359fd6a70a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "code = \"\"\"\n",
    "function foo(n) {\n",
    "  return foo(n + 1)\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "dp.Code(code=code, language=\"javascript\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "864cb30e-4c7c-40fa-b6b6-6af95188a1ee",
   "metadata": {},
   "source": [
    "::: datapane.Formula"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "31709e1a-ce74-44e7-aa7e-8dfab6d1f595",
   "metadata": {},
   "source": [
    "### Simple LaTeX Formula"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "468e53bd-dc42-479a-b696-27e763c39af4",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Formula(r\"\\frac{1}{\\sqrt{x^2 + 1}}\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "60957852-63c1-4abe-a59f-ca3bc33d3da9",
   "metadata": {},
   "source": [
    "::: datapane.HTML   "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e6520a3d-5c3c-4d30-a697-4c76a5db3f4d",
   "metadata": {},
   "source": [
    "### Simple HTML content"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0cdb6cde-7e18-405b-82cc-f267592b8b4f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "html = \"\"\"\n",
    "<html>\n",
    "    <style type='text/css'>\n",
    "        @keyframes example {\n",
    "            0%   {color: #EEE;}\n",
    "            25%  {color: #EC4899;}\n",
    "            50%  {color: #8B5CF6;}\n",
    "            100% {color: #EF4444;}\n",
    "        }\n",
    "        #container {\n",
    "            background: #1F2937;\n",
    "            padding: 10em;\n",
    "        }\n",
    "        h1 {\n",
    "            color:#eee;\n",
    "            animation-name: example;\n",
    "            animation-duration: 4s;\n",
    "            animation-iteration-count: infinite;\n",
    "        }\n",
    "    </style>\n",
    "    <div id=\"container\">\n",
    "      <h1> Welcome to my App </h1>\n",
    "    </div>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "dp.HTML(html)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
